<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书管理</title>
    <script src="js/vue.min.js"></script>
    <script src="js/axios.min.js"></script>
    <!-- 引入样式 -->
    <link href="ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <!-- 引入组件库 -->
    <script src="ele-2.15.7/index.js"></script>
<!--  QueryBook-->
</head>
<body>
<div id="app">
    书名:<input v-model="name">
    出版社:<input v-model="press">
    出版日期:<input v-model="pressdata">
    <button @click="query">查询</button>
    <table style="width: 100%" border="1">
        <tr>
            <th>编号</th>
            <th>书名</th>
            <th>出版社</th>
            <th>出版日期</th>
            <th>作者</th>
            <th>库存</th>
            <th>图片</th>
        </tr>
        <tr v-for="book in list">
            <td>{{book.id}}</td>
            <td>{{book.bookname}}</td>
            <td>{{book.bookpress}}</td>
            <td>{{book.pressdate}}</td>
            <td>{{book.bookauthor}}</td>
            <td>{{book.bookcount}}</td>
            <td align="center"><img :src="book.bookimage" height="100px"></td>
            <td><a :href="'modify.html#' + book.id">修改</a> </td>
        </tr>
    </table>
</div>

<script>
    var vue = new Vue({
       el : "#app",
       data: {
           list :[],
           name : "",
           pressdata : "",
           press : ""
       },
        //当vue对象创建好之后,立即执行的代码
        created : function (){
            this.query();
           //拉姆达表达式写法 =》箭头函数
           //  axios.get(`QueryBookServlet`,{
           //      data:{
           //          name: this.name,
           //          params: this.params,
           //          data : this.data
           //      }
           //  }).then((res)=>{
           //      this.list = res.data;
           //  })
           // // axios({
           // //     url : "QueryBookServlet"}).then((res)=>{
           // //     this.list = res.data;
           // // })
        },
        methods: {
            query() {
                axios.get(`QueryBookServlet`,{
                    params:{
                        name: this.name,
                        press: this.press,
                        pressdata : this.pressdata
                    }
                }).then((res)=>{
                    this.list = res.data;
                })
            }
        }
    });
</script>
</body>
</html>